<template>
    <div>
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <el-icon style="width: 30px; height: 30px; margin-right: 30px;margin-left: 30px;color:#C6E4B6;"><Calendar /></el-icon>
        <span style="color:#bedcae;margin-right: 30px;">{{ currentDate }}</span>
        <span style="color:#bedcae;">第十三周</span>
        <el-button type="primary" style="margin-left: 260px;background-color:#ffca9c;color: #415058;border: 0px;">
            <el-icon style="color: #415058;"><CirclePlus /></el-icon>
            新建任务
        </el-button>
        </div>
        <el-table :data="tableData" border style="width: 656px; border-radius: 10px">
        <el-table-column prop="time" label="Time" width="82" />
        <el-table-column v-for="day in daysOfWeek" :key="day" :prop="day.toLowerCase()" :label="day" width="82" />
        </el-table>
    </div>
</template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  const tableData = [
  { time: '1', mon: '大学物理', tue: '', wed: '', thu: '', fri: '', sat: '', sun: '' },
  { time: '2', mon: 'A211', tue: '', wed: '', thu: '', fri: '', sat: '', sun: '' },
  { time: '3', mon: '', tue: '马原', wed: '', thu: '', fri: '', sat: '', sun: '' },
  { time: '4', mon: '', tue: 'D408', wed: '', thu: '', fri: '', sat: '', sun: '' },
];

    const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    const currentDate = ref(new Date().toISOString().slice(0, 10));
</script>

<style>
.el-table__body-wrapper tbody tr {
  height: 30px; /* Set the consistent row height */
}
.el-table__body-wrapper tbody tr:nth-child(4) td:nth-child(3),
.el-table__body-wrapper tbody tr:nth-child(3) td:nth-child(3) {
  background-color: #FFCCCC; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(2) td:nth-child(2),
.el-table__body-wrapper tbody tr:nth-child(1) td:nth-child(2) {
  background-color: #deffcc; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(7) td:nth-child(2),
.el-table__body-wrapper tbody tr:nth-child(6) td:nth-child(2) {
  background-color: #76A1FB; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(9) td:nth-child(2),
.el-table__body-wrapper tbody tr:nth-child(10) td:nth-child(2) {
  background-color: #C0B39C; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(7) td:nth-child(6),
.el-table__body-wrapper tbody tr:nth-child(6) td:nth-child(6) {
  background-color: #ffe3f1e0; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(9) td:nth-child(5),
.el-table__body-wrapper tbody tr:nth-child(10) td:nth-child(5) {
  background-color: #ffeda7; /* Light red color */
}
.el-table__body-wrapper tbody tr:nth-child(11) td:nth-child(4),
.el-table__body-wrapper tbody tr:nth-child(10) td:nth-child(4) {
  background-color: #ada7ff; /* Light red color */
}
.el-table th, .el-table td {
  text-align: center;
}

</style>